<template>
  <div class="chart-detail">
    <div class="detail-top">
      <div class="top-left">
        医疗收入占比情况（月）
      </div>
      <div class="top-right" @click="goBack">
        返回
      </div>
    </div>
    <div class="detail-box" :style="{height:height+'px'}">
      <h3 class="chart-title">
        <div class="title-circle"></div>
        <div class="title-name">{{title}}</div>
      </h3>
      <div class="detail-content" id="myChart">

      </div>
    </div>
  </div>
</template>
<script>
  import {getChartItemDetail2} from '../../api/api'
  export default {
    name: 'chartDetail',
    props: ['isChange'],
    data() {
      return {
        title: '2017年区域增长什么什么图',
        height: 800
      }
    },
    mounted() {
      this.getContentH();
      setTimeout(() => {
        this.myChart = this.$echarts.init(document.getElementById('myChart'), null, {renderer: 'canvas'})
        //给echart 加loading效果
        this.myChart.showLoading()
        let params = this.$route.params
        this.drawSingleLine(JSON.parse(params.medicalTypeDetail));
      }, 101)
//      getChartItemDetail2('medExpGrowthTrendAnalysisDetail', params.queryYear, params.areaCode, params.costType, params.medicalCategory).then(res => {
//        let json = res.data;
//        if (res.code == 0) {
//          this.title = json.reportName;
//          this.drawLine(json);
//        }
//      })
    },
    watch: {
      isChange(){
        this.getContentH();
      },
    },
    methods: {
      //设置高度
      getContentH(){
        setTimeout(() => {
          let height = document.documentElement.clientHeight;
          let barHeight = 0;
          if (document.querySelector('.el-header')) {
            barHeight = document.querySelector('.el-header').clientHeight;
          }
          this.height = height - barHeight - 84;
        }, 100)
        if (this.myChart) {
          setTimeout(() => {
            this.myChart.resize();
          }, 301)
        }
      },
      goBack(){
        this.$router.go(-1);
      },
      drawSingleLine(data){
        this.myChart.hideLoading();
        let json = {}
        json.monthList = data.year
        json.monthlyGrowthRateList = data.radio
//        json.monthList = ['2017-01', '2017-02', '2017-03', '2017-04', '2017-05', '2017-06', '2017-07', '2017-08', '2017-09', '2017-10', '2017-11', '2017-12']
//        json.monthlyGrowthRateList = ['14', '93', '48', '66', '90', '16', '20', '10', '30', '40', '12', '15'];
//        json.totalList = ['100', '169', '300', '60', '290', '500', '450', '236', '845', '302', '932', '235'];
        this.myChart.setOption({
          xAxis: {
            data: json.monthList,
            show: true,
            axisLine: {
              show: true,//显示x轴坐标线并设置为虚线
              lineStyle: {
                color: '#2a4565'
              }
            },
            axisTick: {
              show: false //不显示x轴坐标的刻度
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            }
          },
          yAxis: {
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#2a4565'
              }
            },
            position: 'left',
            minInterval: 5,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#2a4565'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
          },
          series: [{
            type: 'line',
            showSymbol: true,
            data: json.monthlyGrowthRateList,
            symbolSize: 10,
            color: '#129cff',
            symbol: 'circle',
            label: {
              show: true,
              position: 'top',
              formatter: '{c}%'
            },
          }]
        });
      }
    }
  }
</script>
<style scoped>
  .chart-detail {

  }

  .detail-top {
    height: 44px;
    line-height: 44px;
    overflow: hidden;
    background: #0f1e31;
  }

  .top-left {
    float: left;
    font-size: 18px;
    color: #fff;
    line-height: 34px;
    height: 34px;
    border-left: solid 2px #2b9ff6;
    padding-left: 15px;
    margin-top: 5px;
  }

  .top-right {
    float: right;
    margin-right: 30px;
    font-size: 16px;
    color: #1380e1;
    cursor: pointer;
  }

  .detail-box {
    background: #1B2B44;
    margin: 20px 30px;
  }

  .detail-content {
    width: 100%;
    height: 95%;
  }

  .chart-title {
    box-sizing: border-box;
    height: 36px;
    line-height: 36px;
    color: #fff;
    font-size: 14px;
    display: none;
  }

  .title-circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #018DDE;
    display: inline-block;
    margin-left: 10px;
  }

  .title-name {
    display: inline-block;
    font-size: 16px;
    margin-left: 5px;
  }
</style>
